﻿<!DOCTYPE html>
<!--运行情况综合信息板-->
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="/static/js/common.js"></script>

    <script src="/static/js/echarts2.0.js"></script>
    <script src="/static/js/jquery.min.js"></script>
    <link href="/static/css/style.css" rel="stylesheet">
    <style>
        a {
            text-decoration: none !important;
        }

        a:hover {
            cursor: pointer;
        }

        #map_word {
            width: 100vw;
            position: absolute;
        }

        #map_word header {
            height: 50px;
            background: #f4f4f4;
        }

        #map_word header span {
            padding: 10px 0 0 20px;
        }

        #map_word header span p {
            font-size: 18px;
            color: #333;
            padding: 3px 0 0 20px;
        }

        #map_word main {
            position: absolute;
        }

        #countries img {
            padding-top: 4px;
            margin-right: 5px;
        }

        #countries a {
            background: url(/static/images/map-w-main.png) no-repeat;
            min-width: 80px;
            height: 36px;
            text-align: center;
            padding-top: 3px;
            padding-top: 6px\0 !important;
            color: #fff;
            font-size: 14px;
        }

        #r_main {
            width: 280px;
            height: 100%;
            border-left: 1px solid #dcdcdc;
            position: fixed;
            right: 0;
        }

        #r_main p {
            width: 280px;
            height: 36px;
            color: #fff;
            background: url(/static/images/map-r-main-top.jpg) top center no-repeat;
            font-size: 18px;
            text-align: center;
            padding-top: 12px;

        }

        #select {
            height: 50px;
            padding: 10px 0 0 30px;
            border: 1px solid #dcdcdc;
            border-left: none;
        }

        #data ul li {
            height: 60px;
            border: 1px solid #dcdcdc;
            border-top: none;
            border-left: none;
            padding: 20px 0 0 10px;
        }

        #data ul {
            overflow-y: scroll;
        }

        #data ul li img {
            margin: 5px 10px 0 0;
        }

        #data ul li {
            font-size: 14px;
            color: #333;
        }

        #data ul li strong {
            margin-bottom: 5px;
            display: inline-block;
        }

        #map_word_img {
            display: block;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -815px;
            margin-top: -340px;
            overflow: hidden;
        }

        #map_China_img {
            display: block;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -687px;
            margin-top: -347px;
            overflow: hidden;
        }

        .countries {
            display: block;
            position: absolute;
            top: 50%;
            left: 50%;
            overflow: hidden;
        }

        #China {
            margin-left: -236px;
            margin-top: -131px;
        }

        #Russia {
            margin-left: -290px;
            margin-top: -228px;
        }

        #Japan {
            margin-left: -161px;
            margin-top: -99px;

        }

        #Thailand {
            margin-left: -304px;
            margin-top: -30px;
        }

        #English {
            margin-left: -560px;
            margin-top: -249px;
        }

        #Germany {
            margin-left: -551px;
            margin-top: -208px;
        }

        #French {
            margin-left: -579px;
            margin-top: -179px;
        }

        #SouthAfrica {
            margin-left: -557px;
            margin-top: 205px;
        }

        #America {
            margin-left: 207px;
            margin-top: -144px;
        }

        #Argentina {
            margin-left: 383px;
            margin-top: 230px;
        }

        .small {
            width: 760px !important;
            height: 404px !important;
            display: block !important;
            position: absolute !important;
            top: 50% !important;
            left: 50% !important;
            margin-left: -538px !important;
            margin-top: -190px !important;
            overflow: hidden !important;
        }

        .smallC {
            width: 760px !important;
            height: 550px !important;
            display: block !important;
            position: absolute !important;
            top: 43% !important;
            left: 50% !important;
            margin-left: -520px !important;
            margin-top: -190px !important;
            overflow: hidden !important;
        }

        .small #China {
            margin-left: -69px !important;
            margin-top: -86px !important;

        }

        .small #Russia {
            margin-left: -117px !important;
            margin-top: -124px !important;
        }

        .small #Japan {
            margin-left: -10px;
            margin-top: -57px;
        }

        .small #Thailand {
            margin-left: -97px !important;
            margin-top: -30px !important;
        }

        .small #English {
            margin-left: -242px !important;
            margin-top: -151px !important;
        }

        .small #Germany {
            margin-left: -247px !important;
            margin-top: -123px !important;
        }

        .small #French {
            margin-left: -270px !important;
            margin-top: -95px !important;
        }

        .small #SouthAfrica {
            margin-left: -237px !important;
            margin-top: 100px !important;
        }

        .small #America {
            margin-left: 198px !important;
            margin-top: -96px !important;
        }

        .small #Argentina {
            margin-left: 276px !important;
            margin-top: 128px !important;
        }

        .cities {
            display: block;
            position: absolute;
            top: 50%;
            left: 50%;
            /* overflow: hidden; */
        }

        .cities span {
            background: url(/static/images/cityMain.png) top center no-repeat;
            display: block;
            overflow: hidden;
            padding: 10px 20px;
            background-size: 100% 100%;
            position: relative;
            top: -110px;
            display: none;
            z-index: 999;
        }

        .cities span img {
            width: 100%;
        }

        .cities span strong {
            font-size: 16px;
            color: #333;
            text-align: center;
        }

        .cities span p {
            font-size: 14px;
            color: #333;
            text-align: center;
        }

        #ChinaCity1 {
            margin-left: -66px;
            margin-top: 9px;
        }

        #ChinaCity1:hover span {
            display: block;
        }

        #ChinaCity2 {
            margin-left: -43px;
            margin-top: -7px;

        }

        #ChinaCity2:hover span {
            display: block;
        }

        #ChinaCity3 {
            margin-left: -43px;
            margin-top: 81px;

        }

        #ChinaCity3:hover span {
            display: block;
        }

        .smallC #ChinaCity1 {
            margin-left: 87px;
            margin-top: -13px;
        }

        .smallC #ChinaCity2 {
            margin-left: 110px;
            margin-top: -24px;
        }

        .smallC #ChinaCity3 {
            margin-left: 108px;
            margin-top: 51px;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak class="">
        <div v-if="wordShow">
            <img id="map_word_img" src="/static/images/map-word.jpg" alt="">
            <span id="countries">
                <div id="China" class="countries">
                    <img class="fl" src="/static/images/map-dian-2.png" alt="">
                    <a class="fl" @click="China">中国</a>
                </div>
                <div id="Russia" class="countries">
                    <img class="fl" src="/static/images/map-dian-2.png" alt="">
                    <a class="fl" @click="Russia">俄罗斯</a>
                </div>
                <div id="Japan" class="countries">
                    <img class="fl" src="/static/images/map-dian-2.png" alt="">
                    <a class="fl" @click="Japan">日本</a>
                </div>
                <div id="Thailand" class="countries">
                    <img class="fl" src="/static/images/map-dian-2.png" alt="">
                    <a class="fl" @click="Thailand">泰国</a>
                </div>
                <div id="English" class="countries">
                    <img class="fl" src="/static/images/map-dian-2.png" alt="">
                    <a class="fl" @click="English">英国</a>
                </div>
                <div id="Germany" class="countries">
                    <img class="fl" src="/static/images/map-dian-2.png" alt="">
                    <a class="fl" @click="Germany">德国</a>
                </div>
                <!-- <div id="French" class="countries">
                    <img class="fl" src="/static/images/map-dian-2.png" alt="">
                    <a class="fl" @click="French">法国</a>
                </div> -->
                <div id="SouthAfrica" class="countries">
                    <img class="fl" src="/static/images/map-dian-2.png" alt="">
                    <a class="fl" @click="SouthAfrica">南非</a>
                </div>
                <div id="America" class="countries">
                    <img class="fl" src="/static/images/map-dian-2.png" alt="">
                    <a class="fl" @click="America">美国</a>
                </div>
                <div id="Argentina" class="countries">
                    <img class="fl" src="/static/images/map-dian-2.png" alt="">
                    <a class="fl" @click="Argentina">阿根廷</a>
                </div>
            </span>
        </div>
        <div v-if="Chinashow">
            <img id="map_China_img" src="/static/images/ChinaMap.jpg" alt="">
            <span id="cities">
                <a id="ChinaCity1" class="cities"
                    @click='myclick("85a65e19-182e-4306-8328-221b694d2007","山东圣奥","map/SanDongShengAoMap.html")'>
                    <img class="fl" src="/static/images/map-dian-1.png" alt="">
                    <span>
                        <img src="/static/images/pic1.jpg" alt="">
                        <br>
                        <strong>山东圣奥化学科技有限公司</strong>
                        <br>
                        <p>(山东省菏泽市曹县)</p>
                    </span>
                </a>
                <a id="ChinaCity2" class="cities"
                    @click='myclick("439c014-74ac-40c5-abd7-a3a668118715","泰安工厂","map/huayangmap.html")'>
                    <img class="fl" src="/static/images/map-dian-1.png" alt="">
                    <span>
                        <img src="/static/images/pic1.jpg" alt="">
                        <br>
                        <strong>泰安圣奥化工有限公司</strong>
                        <br>
                        <p>(山东省泰安市宁阳县)</p>
                    </span>
                </a>
                <a id="ChinaCity3" class="cities"
                    @click='myclick("5040afb0-c38e-463b-953c-8605091be001","铜陵工厂","map/TonglingMap.html")'>
                    <img class="fl" src="/static/images/map-dian-1.png" alt="">
                    <span>
                        <img src="/static/images/pic1.jpg" alt="">
                        <br>
                        <strong>安徽圣奥化学科技有限公司</strong>
                        <br>
                        <p>(安徽省铜陵市)</p>
                    </span>
                </a>
            </span>
        </div>
        <!-- <el-col v-if="!show" :span="24" class="tex_cen">
            <div class="map_box">
                <a href="#" class="map_qb map_qb1 absp1"><img src="/static/images/pic1.jpg" alt=""
                        @click='myclick("85a65e19-182e-4306-8328-221b694d2007","山东圣奥","map/SanDongShengAoMap.html")'><span>山东圣奥</span></a>
                <a href="#" class="map_qb map_qb2 absp2"><img src="/static/images/pic2.jpg" alt=""
                        @click='myclick("439c014-74ac-40c5-abd7-a3a668118715","泰安工厂","map/huayangmap.html")'><span>泰安圣奥</span></a>
                <a href="#" class="map_qb map_qb3 absp3"><img src="/static/images/pic3.jpg" alt=""
                        @click='myclick("5040afb0-c38e-463b-953c-8605091be001","铜陵工厂","map/TonglingMap.html")'><span>安徽圣奥</span></a>
            </div>

        </el-col> -->
        <el-dialog title="Echart" :visible.sync="ListItem.dialogVisible" @close='closeDialog' width="80%" height="80%"
            top="10vh">
            <iframe ref="iframe" :src="ListItem.InputUrl" style="height:95%;width:100%" frameborder="0"></iframe>
        </el-dialog>
        <el-row>
            <div id="map_word">
                <header>
                    <span class="fl">
                        <img class="fl" src="/static/images/map-dian-1.png" alt="">
                        <p class="fl">全球工程分布</p>
                    </span>
                    <img class="fr" src="/static/images/map-top-r.png" alt="">
                </header>
            </div>
            <div id="r_main">
                <p>全球工程分布</p>
                <div id="select">
                    <el-select @visible-change="visibleChange" v-model="country" placeholder="请选择" @input="search">
                        <el-option v-for="item in countries" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div id="data">
                    <ul>
                        <li>
                            <img class="fl" src="/static/images/map-dian-1.png" alt="">
                            <a
                                @click='myclick("85a65e19-182e-4306-8328-221b694d2007","山东圣奥","map/SanDongShengAoMap.html")'>
                                <strong>山东圣奥化学科技有限公司 </strong>
                                <br>
                                <span>(山东省菏泽市曹县)</span>
                            </a>
                        </li>
                        <li>
                            <img class="fl" src="/static/images/map-dian-1.png" alt="">
                            <a @click='myclick("439c014-74ac-40c5-abd7-a3a668118715","泰安工厂","map/huayangmap.html")'>
                                <strong>泰安圣奥化工有限公司 </strong>
                                <br>
                                <span>(山东省泰安市宁阳县)</span>
                            </a>
                        </li>
                        <li>
                            <img class="fl" src="/static/images/map-dian-1.png" alt="">
                            <a @click='myclick("5040afb0-c38e-463b-953c-8605091be001","铜陵工厂","map/TonglingMap.html")'>
                                <strong>安徽圣奥化学科技有限公司 </strong>
                                <br>
                                <span>(安徽省铜陵市)</span>
                            </a>
                        </li>
                        <li v-for="item in slist">
                            <img class="fl" src="/static/images/map-dian-1.png" alt="">
                            <a>
                                <strong>{{item.name}}</strong>
                                <br>
                                <span>({{item.city}})</span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </el-row>
    </div>
    </li>
    <script type="text/javascript">
        var ulH = $("body").height() - 48 - 62;
        $("#data ul").height(ulH);
        var map_wordH = $("body").width() - 280;
        $("#map_word").width(map_wordH);
        // var map_wordMainH = $("body").height() - 50;
        // $("#map_word main").height(map_wordMainH);
        if ($("body").width() < 1640) {
            $("#map_word_img").addClass('small');
            $("#countries").addClass('small');
            $("#map_China_img").addClass('smallC');
            $("#cities").addClass('smallC');
        }
        // alert($("body").width())
        app = new Vue({
            el: '#app',
            data: {
                id: '0',
                slist: [],
                searchlist: [],
                countries: [
                    {
                        value: '世界',
                        label: '世界'
                    },
                    {
                        value: '中国',
                        label: '中国'
                    },
                    {
                        value: '俄罗斯',
                        label: '俄罗斯'
                    }, {
                        value: '日本',
                        label: '日本'
                    }, {
                        value: '泰国',
                        label: '泰国'
                    },
                    {
                        value: '英国',
                        label: '英国'
                    },
                    {
                        value: '德国',
                        label: '德国'
                    },
                    // {
                    //     value: '法国',
                    //     label: '法国'
                    // },
                    {
                        value: '南非',
                        label: '南非'
                    },
                    {
                        value: '美国',
                        label: '美国'
                    },
                    {
                        value: '阿根廷',
                        label: '阿根廷'
                    },
                ],
                list: [
                    // {
                    //     country: '中国',
                    //     city: '上海市',
                    //     name: '圣奥化学运营中心及研发中心',
                    // },
                    // {
                    //     country: '中国',
                    //     city: '山东省菏泽市曹县',
                    //     name: '山东圣奥化学科技有限公司',
                    // },
                    // {
                    //     country: '中国',
                    //     city: '山东省泰安市宁阳县',
                    //     name: '泰安圣奥化工有限公司',
                    // },
                    // {
                    //     country: '中国',
                    //     city: '山东省泰安市宁阳县',
                    //     name: '山东华鸿化工有限公司',
                    // },
                    // {
                    //     country: '中国',
                    //     city: '安徽省铜陵市',
                    //     name: '安徽圣奥化学科技有限公司',
                    // },
                    // {
                    //     country: '中国',
                    //     city: '江苏连云港市',
                    //     name: '连云港圣奥化学科技有限公司',
                    // },
                    {
                        country: '俄罗斯',
                        city: '俄罗斯',
                        name: '俄罗斯',
                    },
                    {
                        country: '日本',
                        city: '日本',
                        name: '日本',
                    },
                    {
                        country: '泰国',
                        city: '泰国',
                        name: '泰国',
                    },
                    {
                        country: '英国',
                        city: '英国',
                        name: '英国',
                    },
                    {
                        country: '德国',
                        city: '德国',
                        name: '德国',
                    },
                    {
                        country: '法国',
                        city: '法国',
                        name: '法国',
                    },
                    {
                        country: '南非',
                        city: '南非',
                        name: '南非',
                    },
                    {
                        country: '美国',
                        city: '美国',
                        name: '美国',
                    },
                    {
                        country: '阿根廷',
                        city: '阿根廷',
                        name: '阿根廷',
                    },
                ],
                country: '世界',
                wordShow: true,
                Chinashow: false,
            },
            created: function () {
                this.setSlist(this.list);//处理list数据
            },
            updated: function () {

            },
            methods: {
                //解決edge下select bug
                visibleChange: function (isVisible) {
                    visibleChange(isVisible)
                },
                WordMap: function () {
                    this.wordShow = true;
                    this.Chinashow = false;
                },
                ChinaMap: function () {
                    this.wordShow = false;
                    this.Chinashow = true;
                },
                myclick: function (id, name, url) {
                    console.log(parent.app.mainTabs)
                    // parent.app.mainTabs.push(
                    //     {id:'5040afb0-c38e-463b-953c-8605091be009',name:'铜陵工厂',url:'map/TonglingMap.html',context:'<iframe ref="iframe" src="/OperationBoard/map.html" class="tab-iframe" :style="iframeheight"frameborder="0"></iframe>'}
                    // )
                    parent.app.dotest(id, name, url)
                },
                China: function () {
                    this.country = '中国';
                    this.search(); this.ChinaMap()
                },
                Russia: function () {
                    this.country = '俄罗斯';
                    this.search(); this.ChinaMap()
                },
                Japan: function () {
                    this.country = '日本';
                    this.search(); this.ChinaMap()
                },
                Thailand: function () {
                    this.country = '泰国';
                    this.search(); this.ChinaMap()
                },
                English: function () {
                    this.country = '英国';
                    this.search(); this.ChinaMap()
                },
                Germany: function () {
                    this.country = '德国';
                    this.search(); this.ChinaMap()
                },
                French: function () {
                    this.country = '法国';
                    this.search(); this.ChinaMap()
                },
                SouthAfrica: function () {
                    this.country = '南非';
                    this.search(); this.ChinaMap()
                },
                America: function () {
                    this.country = '美国';
                    this.search(); this.ChinaMap()
                },
                Argentina: function () {
                    this.country = '阿根廷';
                    this.search(); this.ChinaMap()
                },
                setSlist: function (arr) {
                    this.slist = JSON.parse(JSON.stringify(arr));
                },
                search: function () {

                    var v = this.country
                    myThis = this;
                    myThis.searchlist = [];

                    if (v) {
                        var ss = [];
                        // 过滤需要的数据
                        this.list.forEach(function (item) {
                            if (item.country.indexOf(v) > -1) {
                                if (myThis.searchlist.indexOf(item.country) == -1) {//数据传入datalist
                                    myThis.searchlist.push(item.country);
                                }
                                ss.push(item);
                            }
                        });
                        this.setSlist(ss); // 将过滤后的数据给了slist
                    } else {
                        // 没有搜索内容，则展示全部数据
                        this.setSlist(this.list);
                    }
                    if (v == "世界") {
                        this.WordMap();
                        this.setSlist(this.list);

                    } else {
                        this.ChinaMap()
                    };
                }
            },
            mounted: function () {

            },
        });
    </script>

</html>